<template>
  <div class="main">
    <div class="content">
      <div class="content_form">
        <el-form ref="form" :model="form" label-width="140px" class="form_item" :rules="rules">
          <div class="left">
            <el-upload
              action="/api/upfile/newuploadFile"
              list-type="picture-card"
              :headers="token_token"
              :on-success="upload_success_modify"
              name="file"
              :on-preview="handlePictureCardPreview_modify"
              :on-remove="handleRemove_modify"
              :file-list="imgFilesList"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <el-row class="right">
            <el-col>
              <el-form-item label="新闻标题" prop="title">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="创建人(选填)" prop="author">
                <el-input v-model="form.author"></el-input>
              </el-form-item>
            </el-col>
            <!--资讯栏目-->
            <el-col>
              <el-form-item label="栏目" prop="title">
                <el-select v-model="form.columnId" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.columnId"
                    :label="item.columnName"
                    :value="item.columnId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--资讯栏目-->
            <el-col>
              <el-form-item label="图片ID" prop="fileId" v-show="false">
                <el-input v-model="form.fileId"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="图片是否显示" prop="showCoverPic">
                <el-switch
                  v-model="form.showCoverPic"
                  active-text="是"
                  inactive-text="否"
                  active-value="1"
                  inactive-value="0"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="摘要" prop="digest">
                <el-input v-model="form.digest"></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="新闻详情" prop="content">
                <quill-editor
                  class="quill"
                  v-model="form.content"
                  ref="myQuillEditor"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)"
                ></quill-editor>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getToken, setToken, removeToken } from '@/utils/auth';
import { updateNews, updateDetail, newsList } from '@/api/user';
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
var token_one = sessionStorage.getItem('token');
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            id: '',
            engineering: '',
            engineeringTypeOption: [],
            editorOption: {},
            form: {
                title: '',
                author: '',
                content: '', //部门编号
                digest: '',
                fileId: '',
                showCoverPic: '',
                id: '',
                columnId: ''
                // token : gettoken()
            },
            token_token: { Authorization: token_one },
            imageTextType: 'single', // 单图文 / 多图文
            rules: {
                password: [{ required: true, message: '请填写内容', trigger: 'blur' }]
            },
            /*******显示图片**********/
            imgFilesList: []
            /*******显示图片*********/
        };
    },
    created() {
        // var userList_data = { token: getToken() };
        newsList()
            .then(response => {
                if (response.data.code == 200) {
                    console.log('==栏目==', response.data.data);
                    this.options = response.data.data;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(() => {});
    },
    methods: {
        onEditorReady(editor) {
            // 准备编辑器
        },
        onEditorBlur() {}, // 失去焦点事件
        onEditorFocus() {}, // 获得焦点事件
        onEditorChange() {}, // 内容改变事件

        handleRemove_modify(file) {
            console.log(file);
        },
        handlePictureCardPreview_modify(file) {
            this.dialogImageUrl = file.url;
            console.log('==我需要的数据==', file);
            this.dialogVisible = true;
        },
        /******上传图片成功*********/
        upload_success_modify(file) {
            console.log('===我是图片上传成功====', file);
            this.id = file.file_id;
        },
        // 保存
        editSave() {
            var params_one = {
                columnId: this.form.columnId,
                id: this.form.id,
                articleList: [
                    {
                        title: this.form.title,
                        author: this.form.author,
                        content: this.form.content,
                        digest: this.form.digest,
                        showCoverPic: this.form.showCoverPic,
                        fileId: this.id
                    }
                ]
            };
            updateNews(params_one)
                .then(response => {
                    console.log(response);
                    if (response.data.code == 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$emit('closeModal', false);
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // this.loading = false
                    // this.$message.error(response.data.msg)
                });
        },
        /*******修改的回显*********/

        modifyUser(id) {
            var roleId = {
                id: id
            };
            updateDetail(roleId)
                .then(response => {
                    console.log('我是后台博阳的回显功能', response);
                    if (response.data.code == 200) {
                        console.log('我是回显');
                        this.form = response.data.data.mediaNews.articleList[0];
                        let obj_one = new Object();
                        obj_one.url = response.data.data.mediaNews.articleList[0].picUrl;
                        this.imgFilesList.push(obj_one);
                        this.form.columnId = response.data.data.columnId;
                        this.id = response.data.data.mediaNews.articleList[0].fileId;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {
                    // console.log("我是点击了取消")
                });
        },
        /********修改的回显*******/
        /*********上传图片的id***********/
        handleRemove_modify(file) {
            console.log(file);
        },
        handlePictureCardPreview_modify(file) {
            this.dialogImageUrl = file.url;
            console.log('==我需要的数据==', file);
            this.dialogVisible = true;
        },
        /******上传图片成功*********/
        upload_success_modify(file) {
            console.log('===我是图片上传成功====', file);
            this.id = file.file_id;
        }
        /*********上传图片的id***********/
    },

    // 单图文/多图文切换
    selectChange(val) {
        const list = this.imageTextList;
        // this.$refs.forms.resetFields();
        if (val == 'single') {
            for (const i in list) {
                if (i == this.dataIndex) {
                    this.imageTextList[i].show = true;
                } else {
                    this.imageTextList[i].show = false;
                }
            }
        } else {
            for (const i in list) {
                this.imageTextList[i].show = true;
            }
        }
    },
    props: ['EngineeringData'],
    mounted: function() {
        //异步加载
        this.form = this.EngineeringData[0];
    },
    watch: {
        EngineeringData() {
            //数据监视
            this.form = this.EngineeringData[0];
        }
    }
};
</script>
<style scoped>
.left {
    width: 4rem;
    text-align: center;
    padding-right: 0.2rem;
    position: absolute;
    overflow: hidden;
    overflow-y: auto;
    /* height: 100%; */
    background: #fff;
}

/* .left-warpper {
    width: 100%;
    height: 100%;
} */
.left-warpper p {
    text-align: left;
}
.el-button {
    width: 60%;
}
.right {
    padding: 0.1rem 0.2rem 0;
    box-sizing: border-box;
    margin-left: 4rem;
    overflow: hidden;
}

.el-form-item {
    margin-bottom: 0.2rem;
}
.el-form-item__label {
    float: none;
}
.el-form-item__content {
    margin-left: 0 !important;
}
.el-upload {
    width: 100%;
}
</style>